<template>
    <div class="allContainer">
        <div class="searchContainer">
            <span class="inputLabel">容器</span>
            <el-select v-model="containerSearchData.dockerContainerId" placeholder="容器" class="searchInfoInput" clearable @clear="searchContainerInfoClear">
                <el-option :label="item.dockerName" :value="item.dockerContainerId" v-for="item in containerList" :key="item.id"/>
            </el-select>

            <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryContainerLogInfo()">查询日志</el-button>
        </div>
        <div class="logContainer">
            <span v-for="(item, index) in logComputed" :key="index">{{index}} - {{item}} <br /></span>
        </div>
        <div class="searchContainer">
            <span class="inputLabel">查询日志</span>
            <el-input v-model="searchInfo" placeholder="查询信息" class="searchInfoInput" clearable @clear="clearSearchInfo()"></el-input>
            <el-button type="primary" icon="RedoOutlined" class="searchButtonClass" :loading="refreshLoading" @click="refreshContainerLogInfo()">刷新日志</el-button>
        </div>
    </div>
</template>

<script>
import {containerContainerLogInfo, containerInfoQuery} from "@/request/container";
import {createTag} from "@/utils/tagCreate";

export default {
    name: "ContainerLogManage",
    data() {
        return {
            containerSearchData: {
                dockerContainerId: '',
                beginTimestamp: '',
                endTimestamp: ''
            },
            containerList: [],
            info: [],
            searchInfo: '',
            serviceContainerLogData: [],
            beginTime: null,
            endTime: null,
            searchLoading: false,
            refreshLoading: false
        }
    },
    computed: {
        logComputed() {
            if (this.searchInfo) {
                let resInfo = [];
                this.serviceContainerLogData.forEach(resData => {
                    if (resData.includes(this.searchInfo)) {
                        resInfo.push(resData)
                    }
                })
                return resInfo;
            } else {
                return this.serviceContainerLogData
            }
        }
    },
    methods: {
        queryContainerLogInfo() {
            this.searchLoading = true
            if (!this.containerSearchData.dockerContainerId) {
                return;
            }
            let time = new Date().getTime();
            this.beginTime = time - 5 * 60 * 1000;
            this.endTime = time
            // 设置查询参数
            this.containerSearchData.beginTimestamp = this.beginTime;
            this.containerSearchData.endTimestamp = this.endTime;
            // 查询日志
            containerContainerLogInfo(this.containerSearchData).then(res => {
                this.serviceContainerLogData = []
                res.data.forEach(info => {
                    this.serviceContainerLogData.push(info)
                })
                this.searchLoading = false
            }).catch(res => {
                this.searchLoading = true
            })
        },
        refreshContainerLogInfo() {
            this.refreshLoading = true
            if (!this.containerSearchData.dockerContainerId) {
                return;
            }
            let time = new Date().getTime();
            this.beginTime = time - 5 * 60 * 1000;
            this.endTime = time
            // 设置查询参数
            this.containerSearchData.beginTimestamp = this.beginTime;
            this.containerSearchData.endTimestamp = this.endTime;
            // 查询日志
            containerContainerLogInfo(this.containerSearchData).then(res => {
                this.serviceContainerLogData = []
                res.data.forEach(info => {
                    this.serviceContainerLogData.push(info)
                })
                this.refreshLoading = false
            }).catch(res => {
                this.refreshLoading = true
            })
        },
        clearSearchInfo() {
            this.searchInfo = null
        },
        searchContainerInfoClear() {
            this.serviceContainerLogData = []
        }
    },
    created() {
        containerInfoQuery(this.containerSearchData).then(res => {
            if (res.code === '200') {
                this.containerList = res.data
            }
        });
    },
    mounted() {
        createTag(this.$route, this.$store)
    }
}
</script>

<style scoped lang="less">
.allContainer {
    width: 98%;
    height: 100%;
    margin: 1% 0.2% 0.2%;
    .searchContainer {
        width: 100%;
        height: 10%;
        .searchInfoInput {
            width: 15%;
            padding-left: 1%;
        }
        .inputLabel {
            padding-left: 1%;
            font-weight: 700;
            font-size: 15px;
            color: #606266;
            //去除光标
            caret-color: transparent;
        }
        .searchButtonClass {
            margin-left: 1%;
        }
    }
    .logContainer {
        margin: 1% 0.2% 0.2%;
        width: 100%;
        height: 80vh;
        background-color: #1B2831FF;
        overflow: scroll;
        span {
            padding-left: 1%;
            color: aqua;
        }
    }
}


</style>